<template>
  <el-dropdown @command="handleLanguageChange" trigger="click">
    <el-button circle>
      <el-icon>
        <img src="@/assets/svgs/language.svg" style="width: 16px;height: 16px;" />
      </el-icon>
    </el-button>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item command="zh-CN" :disabled="currentLocale === 'zh-CN'">
          <span>简体中文</span>
        </el-dropdown-item>
        <el-dropdown-item command="en" :disabled="currentLocale === 'en'">
          <span>English</span>
        </el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useI18n } from 'vue-i18n'

const { locale } = useI18n()
const currentLocale = ref('zh-CN')

// 初始化当前语言
onMounted(() => {
  currentLocale.value = localStorage.getItem('locale') || 'zh-CN'
})

// 处理语言切换
const handleLanguageChange = (lang: string) => {
  locale.value = lang
  currentLocale.value = lang
  localStorage.setItem('locale', lang)
  
  // 更新Element Plus的语言包
  location.reload()
}
</script>

<style scoped>
.el-button {
  border: none;
  background-color: transparent;
}
</style>